<template>
  <div class="ml-5">
    <h3 class="text-xl font-semibold pb-3.5">生物学特性描述</h3>
    <div v-if="dataWithLineBreaks">
      <!-- 使用 v-html 渲染带有 <br> 的字符串 -->
      <p v-html="dataWithLineBreaks"></p>
    </div>
    <div v-else>
      <p>暂无数据。</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  data: {
    type: String,
    default: '',  // 设置默认值为空字符串
  },
});

// 使用计算属性动态处理 props.data 的换行符
const dataWithLineBreaks = computed(() => {
  if (typeof props.data === 'string') {
    return props.data.replace(/\n/g, '<br>');
  }
  return '';  // 如果不是字符串，返回空字符串
});
</script>
